<template>
  <div style="margin-top: 20px">
    搜索站点:
    <el-input
      style="width: 25%;margin-left: 20px"
      v-model="queryDto.map.likeAddress"
      placeholder="请输入站点名称"
    />
    <el-button type="primary" style="margin-left: 20px" @click="getSite()">
      搜索
    </el-button>
    <el-button type="info" @click="rest()">重置</el-button>
  </div>
  <el-divider />
  <el-button type="success" @click="openSave()">添加</el-button>
  <el-divider />
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="provinceName" label="省名" />
    <el-table-column prop="cityName" label="市名" />
    <el-table-column prop="areaName" label="区名" />
    <el-table-column prop="address" label="站点名称" />
    <el-table-column prop="x" label="经度" />
    <el-table-column prop="y" label="纬度" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" #default="scope">
      <el-button type="warning" size="mini" @click="openUp(scope.row)">
        编辑
      </el-button>
      <el-button type="danger" size="mini" @click="deleteById(scope.row.id)">
        删除
      </el-button>
    </el-table-column>
  </el-table>
  <div>
    <el-pagination
      v-model:current-page="queryDto.page"
      v-model:page-size="queryDto.size"
      :page-sizes="[3, 5, 7, 9]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="dialogFormVisible" title="修改or添加" width="600px">
    <el-form :model="form">
      <el-form-item label="站点名称">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
      <span style="font-weight: bold;font-size: 16px">请选择具体地址:</span>
      <br />
      <br />
      <el-form-item>
        <el-select
          v-model="form.provinceId"
          placeholder="请选择"
          style="width: 240px"
          @change="getCity()"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.provinceId != null">
        <el-select
          v-model="form.cityId"
          placeholder="请选择"
          style="width: 240px"
          @change="getArea()"
        >
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.cityId != null">
        <el-select
          v-model="form.areaId"
          placeholder="请选择"
          style="width: 240px"
          @change="getAddress()"
        >
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div
      v-if="
        form.provinceId != null && form.cityId != null && form.areaId != null
      "
    >
      <baidu-map
        class="map"
        :scroll-wheel-zoom="true"
        :center="centerAddress"
        :zoom="zoom"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        <bm-marker
          :position="center"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        ></bm-marker>
      </baidu-map>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <el-button type="primary" @click="SaveOrUpdate()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { getSitePage, removeById, saveSite, updateSite } from '@/api/site'
import { ElMessage } from 'element-plus'
import { BaiduMap, BmMarker } from 'vue-baidu-map-3x'
import {
  getAddressInfo,
  getAreaList,
  getCityList,
  getProvinceList,
} from '@/api/address'

const queryDto = ref({
  page: 1,
  size: 5,
  map: {
    likeAddress: '',
  },
})
const tableData = ref([])
const total = ref(0)
const handleSizeChange = val => {
  queryDto.value.size = val
  getSite()
}
const handleCurrentChange = val => {
  queryDto.value.page = val
  getSite()
}
const getSite = async () => {
  const { code, data } = await getSitePage(queryDto.value)
  if (code === 200) {
    tableData.value = data.records
    total.value = data.total
  }
}
onMounted(() => {
  getSite()
  getProvince()
})
const rest = () => {
  queryDto.value.map.likeAddress = ''
  getSite()
}

const form = ref({
  id: null,
  address: '',
  provinceId: null,
  cityId: null,
  areaId: null,
  x: 0,
  y: 0,
})
const provinceList = ref([])
const cityList = ref([])
const areaList = ref([])
const getProvince = async () => {
  const { code, data } = await getProvinceList()
  if (code === 200) {
    provinceList.value = data
  }
}
const getCity = async () => {
  const { code, data } = await getCityList(form.value.provinceId)
  if (code === 200) {
    cityList.value = data
  }
}
const getArea = async () => {
  const { code, data } = await getAreaList(form.value.cityId)
  if (code === 200) {
    areaList.value = data
  }
}
const centerAddress = ref('')
const getAddress = async () => {
  const { code, data } = await getAddressInfo(
    form.value.provinceId,
    form.value.cityId,
    form.value.areaId
  )
  if (code === 200) {
    centerAddress.value = data
  }
}
const dialogFormVisible = ref(false)
const openUp = row => {
  dialogFormVisible.value = true
  form.value = row
  getCity()
  getArea()
  getAddress()
}
const openSave = () => {
  dialogFormVisible.value = true
  form.value = {}
  form.value.id = null
}
const deleteById = async id => {
  if (confirm('确定删除吗？')) {
    const { code } = await removeById(id)
    if (code === 200) {
      ElMessage.success('删除成功')
      getSite()
    }
  }
}
let zoom = ref(15)
const center = ref({
  lng: 116.404,
  lat: 39.915,
})

const syncCenterAndZoom = e => {
  const { lng, lat } = e.target.getCenter()
  zoom.value = e.target.getZoom()
  nextTick(() => {
    center.value.lng = lng
    center.value.lat = lat
    form.value.x = lng
    form.value.y = lat
  })
}
const SaveOrUpdate = async () => {
  if (form.value.id == null) {
    const { code } = await saveSite(form.value)
    if (code === 200) {
      ElMessage.success('添加成功')
      dialogFormVisible.value = false
      getSite()
    }
  }
  if (form.value.id != null) {
    const { code } = await updateSite(form.value)
    if (code === 200) {
      ElMessage.success('修改成功')
      dialogFormVisible.value = false
      getSite()
    }
  }
}
</script>
<style>
.map {
  height: 300px;
}
</style>
